<template>
  <div class="categoryList">
    <div class="head">
      <div @click="changeTab(index, item.id)" :class="[nowIndex === index ? 'active' : '']" v-for="(item, index) in navData" :key="index">
        <text>{{ item.name }}</text>
      </div>
    </div>
    <div class="info">
      <p>{{ currentNav.name }}</p>
      <p>{{ currentNav.front_desc }}</p>
    </div>
    <div class="list" v-if="goodsList.length != 0">
      <div @click="goodsDetail(item.id)" class="item" v-for="(item, index) in goodsList" :key="index">
        <img class="img" :src="item.list_pic_url" alt="" />
        <p class="name">{{ item.name }}</p>
        <p class="price">￥{{ item.retail_price }}</p>
      </div>
    </div>
    <div v-else class="none">数据库暂无数据...</div>
  </div>
</template>

<script>
import data from './data.json'
export default {
  data() {
    return {
      data,
      categoryId: '',
      nowIndex: 0,
      goodsList: [],
      navData: [],
      currentNav: {},
      scrollLeft: 0,
    }
  },
  mounted() {
    // 获取页面传的参数
    this.categoryId = this.$route.query.id
    this.getAllData()
  },
  methods: {
    async changeTab(index, id) {
      this.nowIndex = index
      let listdata
      switch (index % 3) {
        case 0:
          listdata = this.data.goodsList
          break
        case 1:
          listdata = this.data.goodsList2
          break
        case 2:
          listdata = this.data.goodsList3
          break
        default:
          listdata = this.data.goodsList
          break
      }
      //  await this.commonApi({
      //   url: '/goods/goodsList',
      //   method: 'get',
      //   title: '根据id获取获取商品',
      //   params: {
      //     categoryId: id,
      //   },
      // })
      this.goodsList = listdata.data
      this.currentNav = listdata.currentNav
      // 需要让导航滚动到可见区域
      if (this.nowIndex > 4) {
        this.scrollLeft = this.nowIndex * 60
      }
    },
    async getAllData() {
      const navdata = this.data.categoryNav
      //  await this.commonApi({
      //   url: '/category/categoryNav',
      //   method: 'get',
      //   title: '根据id获取category',
      //   params: { id: this.categoryId },
      // })
      this.navData = navdata.navData
      this.currentNav = navdata.currentNav
      for (let i = 0; i < this.navData.length; i++) {
        const id = this.navData[i].id
        if (id === this.currentNav.id) {
          this.nowIndex = i
        }
      }

      // 需要让导航滚动到可见区域
      if (this.nowIndex > 4) {
        this.scrollLeft = this.nowIndex * 60
      } else {
        this.scrollLeft = 0
      }
      const listdata = this.data.goodsList
      //  await this.commonApi({
      //   url: '/goods/goodsList',
      //   method: 'get',
      //   title: '根据id获取商品列表',
      //   params: {
      //     categoryId: this.categoryId,
      //   },
      // })
      this.goodsList = listdata.data
    },
    goodsDetail(id) {
      console.log(id)
      this.$router.push({
        path: '/goods',
        query: {
          id,
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
@import './style';
</style>
